<template>
  <div class="channel-edit">
    <!-- 我的频道 -->
    <div class="row1">
      <div class="r1-title">
        <div class="myChannel-title">我的频道</div>
        <div class="editBtn" @click="show = !show">
          {{ show ? "编辑" : "完成" }}
        </div>
      </div>
      <ul class="myChannel-comtent">
        <li v-for="(item, index) in myChanelInfo" :key="item.id">
          <i v-show="!show" @click="delChannel(item, index)">×</i>
          {{ item.name }}
        </li>
      </ul>
    </div>
    <!-- 频道推荐 -->
    <div class="row2">
      <div class="recommend-title">频道推荐</div>
      <ul class="recommend-comtent">
        <li
          v-for="(item, index) in disposeChanelInfo"
          :key="item.id"
          @click="addChannel(item, index)"
        >
          <i>+</i>
          {{ item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {
  getAllChannels,
  addChannels,
  delChannels
} from '@/api/homepage/nav.js'
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      show: true,
      myChanelInfo: [],
      recommendChanel: []
    }
  },
  props: {
    chanelinfo: {
      type: Array,
      required: true
    }
  },
  created () {},
  mounted () {
    this.myChanel()
    this.allChannels()
  },
  methods: {
    ...mapMutations(['channelsChange']),
    myChanel () {
      // 判断用户是否登录
      if (this.userToken !== null) {
        // 从数据库里取
        this.myChanelInfo = this.chanelinfo
      } else if (this.sotrageChannels !== null) {
        // 从本地取
        this.myChanelInfo = this.sotrageChannels
      } else {
        this.myChanelInfo = this.chanelinfo
      }
    },
    async allChannels () {
      try {
        const {
          data: { data: res }
        } = await getAllChannels()
        this.recommendChanel = res.channels
      } catch (error) {
        console.log(error)
        this.$toast('获取参数失败')
      }
    },
    addChannel (data, index) {
      this.myChanelInfo.push(data)
      // 判断用户是否登录
      if (this.userToken !== null) {
        // 登录了存储到数据库
        addChannels([{ id: data.id, seq: index }]).then((res) => {
          console.log(res)
        })
      } else {
        // 未登录存储到本地
        this.channelsChange(this.myChanelInfo)
      }
    },
    delChannel (item, index) {
      this.myChanelInfo.splice(index, 1)
      // 判断用户是否登录
      if (this.userToken !== null) {
        // 从数据库里删除
        delChannels(item.id).then((res) => {})
      } else {
        // 从本地删除
        this.channelsChange(this.myChanelInfo)
      }
    }
  },
  // 计算属性
  computed: {
    // state
    ...mapState(['userToken', 'sotrageChannels']),
    disposeChanelInfo () {
      return this.recommendChanel.filter((item) => {
        const data = this.myChanelInfo.find((subItem) => {
          return item.id === subItem.id
        })
        return !data
      })
    }
  }
}
</script>

<style lang="less" scoped>
.channel-edit {
  margin-top: 109px;
  padding: 0 35px;
  .row1,
  .row2 {
    .r1-title {
      display: flex;
      justify-content: space-between;
      .myChannel-title {
        font-size: 32px;
        color: #333;
      }
      .editBtn {
        width: 100px;
        border: 1px solid #fa7e7e;
        font-size: 28px;
        text-align: center;
        border-radius: 28px;
        color: #fa7e7e;
      }
    }
    .myChannel-comtent,
    .recommend-comtent {
      width: 100%;
      display: flex;
      font-size: 28px;
      color: #222222;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 48px;
      li {
        position: relative;
        height: 86px;
        padding: 0 35px;
        background: #f4f5f6;
        border-radius: 6px;
        line-height: 86px;
        text-align: center;
        margin-bottom: 30px;
        margin-right: 20px;
      }
    }
    .myChannel-comtent i {
      position: absolute;
      right: -2px;
      top: -41px;
      font-size: 32px;
      color: crimson;
    }
  }
  .recommend-title {
    font-size: 32px;
    color: #333;
  }
  .recommend-comtent {
    i {
      font-size: 32px;
    }
  }
}
</style>
